<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->
<!--    {{ props.record }}-->
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="TASK_MAIN_EDIT.RULES">
      <a-row :gutter="12">
<!--        <a-col :span="12">-->
<!--          <a-form-item label="处理人员" field="account" required>-->
<!--            <a-input v-model="formState.account.name" allow-clear placeholder="请填写处理人员" :disabled="isUpdate"/>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
        <a-col :span="24">
<!--            <a-card title="任务内容" style="width: 100%">-->
          <a-divider orientation="left">任务内容</a-divider>
              <a-card v-for="idx in formState.content" :key="idx" style="margin-top: 10px"  :title="idx.title">
                <template #extra>
                                      <a-radio-group v-model="idx.isComplete" type="button"  >
                                        <a-radio :value="false">未完成</a-radio>
                                        <a-radio :value="true">完成</a-radio>
                                      </a-radio-group>
                </template>
                <a-divider orientation="left">工作内容</a-divider>
                {{ idx.content }}
                <a-divider orientation="left">备注信息</a-divider>
                <a-textarea v-model="idx.remarks" placeholder="请填写备注信息" allow-clear/>

              </a-card>

<!--            </a-card>-->

<!--            <a-list>-->
<!--              <a-list-item v-for="idx in props.record.content" :key="idx">-->
<!--                <a-list-item-meta>-->
<!--                  <template #title>-->
<!--                    {{ idx.title }}   {{EmptyUtil.isEmptyString(idx.completionTime)?'':'完成时间：'+idx.completionTime}}-->
<!--                  </template>-->

<!--                  <template #description>-->
<!--                    {{ idx.content }}-->


<!--                  </template>-->
<!--                </a-list-item-meta>-->
<!--                <template #actions>-->

<!--                  <span style="padding: 4px"></span>-->
<!--                  <a-space direction="vertical" size="large">-->
<!--                    <a-radio-group v-model="idx.isComplete" type="button"  >-->
<!--                      <a-radio :value="true">完成</a-radio>-->
<!--                      <a-radio :value="false">未完成</a-radio>-->
<!--                    </a-radio-group>-->
<!--                  </a-space>-->

<!--                </template>-->



<!--              </a-list-item>-->


<!--            </a-list>-->

        </a-col>


      </a-row>


    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {EditDrawer} from '@/libs/core'
import {TASK_MAIN_EDIT} from "../resource/form";
import {CustomerHttp} from '../resource/http'

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addMain, updateMain} = CustomerHttp
const config = {tplRecord: TASK_MAIN_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addMain).setUpdateRequest(updateMain)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改任务' : '新建任务'
</script>
